<template>
  <div>
    <!-- <div class="toptitle">组织编码</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="店员姓名：">
        <el-input v-model="formInline.realName" placeholder></el-input>
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="formInline.tel" placeholder></el-input>
      </el-form-item>
      <el-form-item label="身份证号码：">
        <el-input v-model="formInline.idCard" placeholder></el-input>
      </el-form-item>
      <el-form-item label="店铺人员编码：">
        <el-input v-model="formInline.employeeNo" placeholder></el-input>
      </el-form-item>
      <!-- <el-form-item label="状态：">
        <el-select v-model="formInline.status" placeholder="全部" clearable>
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="creatoneOrg()" size="mini" icon="el-icon-edit">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goback()" size="mini">返回</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      style="width: 100%; margin-bottom: 20px" row-key="goodsTypeId" border v-loading="loading" default-expand-all>
      <el-table-column type="index" label="序号" align="center" width="60" fixed></el-table-column>

      <el-table-column prop="employeeNo" label="店铺人员编号" width="180"></el-table-column>

      <el-table-column prop="userType" label="职位" align="center" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.userType == 4">店主</span>
          <span v-if="scope.row.userType == 5">店长</span>
          <span v-if="scope.row.userType == 6">店员</span>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="100" align="center">
        <!-- <template slot-scope="scope">{{scope.row.sex===1?'男':'女'}}</template> -->
        <template slot-scope="scope">
          <span v-if="scope.row.sex == 1">男</span>
          <!-- <span v-if="scope.row.sex==2">女</span> -->
          <span v-if="scope.row.sex == 0">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="店员姓名" width="180" align="center"></el-table-column>

      <el-table-column prop="tel" label="手机号码" align="center" width="150"></el-table-column>
      <el-table-column prop="academic" label="学历" align="center" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.academic == 0">高中以下</span>
          <span v-if="scope.row.academic == 1">大专</span>
          <span v-if="scope.row.academic == 2">本科</span>
          <span v-if="scope.row.academic == 3">硕士</span>
        </template>
      </el-table-column>

      <el-table-column prop="workYear" label="工作年限（年）" align="right" width="150">
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号码" align="center" width="180"></el-table-column>
      <el-table-column align="center" prop="headPicUrl" label="店员头像" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.headPicUrl" v-if="
                            scope.row.headPicUrl != '' &&
                            scope.row.headPicUrl != null
                        " width="70" height="50" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template slot-scope="scope">{{
                    scope.row.status === 0 ? "停用" : "启用"
                }}</template>
      </el-table-column>

      <el-table-column prop="memberCount" label="绑定会员数" align="right" width="120"></el-table-column>
      <el-table-column prop="saleAmount" label="销售额" align="right"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="200"></el-table-column>

      <el-table-column label="操作" width="280" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.status == 1 && scope.row.userType != 5" size="mini" @click="
                            updateStatus(
                                scope.row.userId,
                                0,
                                scope.row.userType
                            )
                        ">停用</el-button>
          <el-button type="text" v-if="scope.row.status == 0 && scope.row.userType != 5" @click="
                            updateStatus(
                                scope.row.userId,
                                1,
                                scope.row.userType
                            )
                        " size="mini">启用</el-button>
          <el-button type="text" size="mini" @click="changeorg(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="handledelete(scope.row)" v-if="scope.row.userType != 5">删除
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="280" align="center" fixed="right" v-if="this.flagdianyuanone">
        <template slot-scope="scope">  -->
      <!-- <el-button
            type="text"
            v-if="scope.row.status == 1"
            size="mini"
            @click="updateStatus(scope.row.userId,0)"
          >停用</el-button>
          <el-button
            type="text"
            v-if="scope.row.status == 0"
            @click="updateStatus(scope.row.userId,1)"
            size="mini"
          >启用</el-button> -->
      <!-- <el-button type="text" size="mini" @click="changeorg(scope.row)">修改</el-button> -->
      <!-- <el-button type="text" size="mini" @click="handledelete(scope.row)">删除</el-button> -->
      <!-- </template>
      </el-table-column> -->
    </el-table>
    <el-form :inline="true" :model="formInline">
      <el-form-item style="margin-top: 6px"></el-form-item>
    </el-form>
    <div class="block" style="margin-top: -49px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <el-dialog title="信息" :visible.sync="dialogVisibleorg" width="50%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="ruleForm.realName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="onboardDate" label="上岗日期">
          <el-date-picker placeholder="选择日期" v-model="ruleForm.onboardDate" style="width: 70%" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历" prop="academic">
          <el-select v-model="ruleForm.academic">
            <el-option label="高中以下" value="0"></el-option>
            <el-option label="大专" value="1"></el-option>
            <el-option label="本科" value="2"></el-option>
            <el-option label="硕士" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作年限" prop="workYear">
          <el-input v-model="ruleForm.workYear" type="number" style="width: 200px" min="0"></el-input>
          <span>年</span>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model="ruleForm.tel" :disabled="this.flagdianone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCard">
          <el-input v-model="ruleForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="ruleForm.status">
            <el-option label="停用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="店员照片" prop="headPicUrl">
          <el-row>
            <el-col style="margin: 10px; 0px; 10px; 0">
              <el-upload style="margin: 10px" :action="action"
                list-type="picture-card" :limit="1" :on-preview="handlePictureCardPreview" :on-success="upLoadPicone"
                :on-change="handleImgChangeone" :file-list="imgListone" :headers="headers">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleorg = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEditone()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleImg">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
  import {
    //   queryGoodsTypeList,
    //   addGoodsType,
    //   addLowerGoodsType,
    //   deleteGoodsType,
    //   updaterole,
    //   getUserOrgType
    queryStoreUserInfo,
    editClerk,
    deleteClerk
  } from "@/api/shopMemberset";
  import qs from "qs";
  export default {
    data() {
      return {
        action: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
        headers: {
          token: localStorage.getItem("token") //从cookie里获取token，并赋值  Authorization ，而不是token
        },
        tableData: [],
        userType: "",
        txtVal: "",
        picUrl: "",
        loading: true,
        dialogVisibleorg: false,
        dialogVisibleorgone: false,
        imgListone: [],
        imgListtwo: [],
        ruleForm: {
          orgSeq: "",
          realName: "",
          onboardDate: "",
          workYear: "",
          academic: "",
          tel: "",
          status: "1",
          headPicUrl: "",
          idCard: "",

          sex: "",
        },
        orgSeqxia: "",
        orgList: {},
        flagdian: false,
        total: 0,
        options: [],
        optionsone: [],
        listQuery: {
          current: 1,
          size: 10
        },
        orgSeq: "",
        flagorg: false,
        dialogVisible: false,
        flagdianyuanone: false,
        flagdianyuan: false,
        dialogVisibleImg: false,
        flagdianone: false,
        dialogImageUrl: "",
        formInline: {
          realName: "",
          workYear: "",
          academic: "",
          tel: "",
          status: "1",
          idCard: "",
          sex: "",
          employeeNo: "",
        },
        orgList: [],
        userId: "",
        rules: {
          realName: [{
            required: true,
            message: "请输入店员姓名",
            trigger: "blur"
          }],
          onboardDate: [{
            required: true,
            message: "请输入上岗日期",
            trigger: "blur"
          }],
          workYear: [{
            required: true,
            message: "请输入工作年限",
            trigger: "blur"
          }],
          academic: [{
            required: true,
            message: "请选择学历",
            trigger: "blur"
          }],
          sex: [{
            required: true,
            message: "请选择性别",
            trigger: "blur"
          }],
          status: [{
            required: true,
            message: "请选择状态",
            trigger: "blur"
          }],
          tel: [{
              required: true,
              message: "请输入手机号",
              trigger: "blur"
            },
            {
              pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[0123456789])\d{8}$/,
              message: "请输入正确的手机号",
              trigger: "blur"
            }
          ],
          idCard: [{
              required: true,
              message: "请输入身份证号码",
              trigger: "blur"
            },

            {
              pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: "请输入正确的身份证号",
              trigger: "blur"
            }
          ],
          headPicUrl: [{
            required: true,
            message: "请上传图片",
            trigger: "blur"
          }],
        }
      };
    },
    mounted() {
      this.logininfo = localStorage.getItem("logininfo");
      this.orgSeq = JSON.parse(this.logininfo).orgSeq;


      this.orgList = JSON.parse(this.logininfo).orgList;

      this.orgList.forEach((item, i) => {
        if (this.orgList[i].userType == 4 || this.orgList[i].userType == 5) {
          this.flagdian = true;
          this.flagdianyuan = false;
          this.flagdianyuanone = true
        } else {
          this.flagdianyuan = true;
          this.flagdianyuanone = false;
        }
        // if(this.orgList[i].userType==6){
        //     this.flagdianyuan=true;
        //     this.flagdianyuanone=false;
        // }else{
        //   this.flagdianyuan=false;
        //   this.flagdianyuanone=true
        // }

      })
      console.log(this.flagdian, this.flagdianyuan, "kiki")
      this.rolemanageone();
    },
    methods: {
      goback() {
        this.$router.push("/shopArchives")
      },
      kong() {
        this.formInline.realName = "";
        this.formInline.tel = "";
      },
      creatoneOrg() {
        this.dialogVisibleorg = !this.dialogVisibleorg;

        this.ruleForm.realName = "";
        this.ruleForm.onboardDate = "";
        this.ruleForm.workYear = "";
        this.ruleForm.academic = "";
        this.ruleForm.tel = "";
        this.ruleForm.status = "";
        this.ruleForm.headPicUrl = "";
        this.ruleForm.idCard = "";
        this.ruleForm.sex = "";
        this.flagorg = true;
        this.imgListone = [];
        console.log(this.flagorg, "lo");
      },
      changeorg(v) {
        if (v.userType == 5) {
          this.flagdianone = true
        } else {
          this.flagdianone = false
        }
        this.userType = v.userType,

          (this.ruleForm.realName = v.realName),
          this.ruleForm.onboardDate = v.onboardDate,
          (this.ruleForm.workYear = String(v.workYear)),
          (this.ruleForm.academic = String(v.academic)),
          (this.ruleForm.tel = v.tel),
          (this.ruleForm.idCard = v.idCard),
          (this.ruleForm.sex = String(v.sex)),

          (this.ruleForm.status = String(v.status)),

          (this.ruleForm.headPicUrl = v.headPicUrl);
        this.userId = v.userId;
        this.dialogVisibleorg = !this.dialogVisibleorg;
        this.flagorg = false;
        var headPicUrl = v.headPicUrl;

        this.imgListone = [];
        if (v.headPicUrl != "" && v.headPicUrl != null) {
          let data = {
            name: "",
            url: v.headPicUrl
          };
          this.imgListone.push(data);
        }
        if (this.ruleForm.sex == "null") {
          this.ruleForm.sex = ""
        }
        if (this.ruleForm.academic == "null") {
          this.ruleForm.academic = ""
        }

      },
      confirmEditone() {

        if (this.ruleForm.realName == "" || this.ruleForm.realName == null) {
          this.$message.error("请输入店员姓名");
          return;
        }
        if (this.ruleForm.onboardDate == "" || this.ruleForm.onboardDate == null) {
          this.$message.error("请输入上岗日期");
          return;
        }

        if (this.ruleForm.sex == "" || this.ruleForm.sex == null) {
          this.$message.error("请选择性别");
          return;
        }
        if (this.ruleForm.academic == "" || this.ruleForm.academic == null) {
          this.$message.error("请选择学历");
          return;
        }

        if (this.ruleForm.workYear == "" || this.ruleForm.workYear == null) {
          this.$message.error("请输入工作年限");
          return;
        }
        if (this.ruleForm.tel == "" || this.ruleForm.tel == null) {
          this.$message.error("请输入手机号");
          return;
        } else {
          if (
            !/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[0123456789])\d{8}$/.test(
              this.ruleForm.tel
            )
          ) {
            this.$message.error("请输入正确的手机号");
            return;
          }
        }
        if (this.ruleForm.idCard == "" || this.ruleForm.idCard == null) {
          this.$message.error("请输入身份证号");
          return;
        } else {
          if (
            !/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
              this.ruleForm.idCard
            )
          ) {
            this.$message.error("请输入正确的身份证号");
            return;
          }
        }

        if (this.ruleForm.status == "" || this.ruleForm.status == null) {
          this.$message.error("请选择状态");
          return;
        }
        if (this.ruleForm.headPicUrl == "" || this.ruleForm.headPicUrl == null) {
          this.$message.error("请上传图片");
          return;
        }
        console.log(this.flagorg, "888999");
        if (this.flagorg == false) {
          let data = {
            userType: this.userType,
            orgSeq: this.orgSeq,
            realName: this.ruleForm.realName,
            onboardDate: this.ruleForm.onboardDate,
            workYear: this.ruleForm.workYear,
            academic: this.ruleForm.academic,
            tel: this.ruleForm.tel,
            status: this.ruleForm.status,
            idCard: this.ruleForm.idCard,
            sex: this.ruleForm.sex,
            headPicUrl: this.ruleForm.headPicUrl,
            userId: this.userId
          };
          console.log("ioippp");

          editClerk(data).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: res.message,
                type: "success"
              });
              this.dialogVisibleorg = !this.dialogVisibleorg;
              this.rolemanageone();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: "error"
              });
            }
          });
        } else if (this.flagorg == true) {
          console.log("ioio");
          let data = {
            userType: "6",
            orgSeq: this.orgSeq,
            realName: this.ruleForm.realName,
            onboardDate: this.ruleForm.onboardDate,
            workYear: this.ruleForm.workYear,
            academic: this.ruleForm.academic,
            tel: this.ruleForm.tel,
            status: this.ruleForm.status,
            idCard: this.ruleForm.idCard,
            sex: this.ruleForm.sex,
            headPicUrl: this.ruleForm.headPicUrl
          };
          editClerk(data).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: res.message,
                type: "success"
              });
              this.dialogVisibleorg = !this.dialogVisibleorg;
              this.rolemanageone();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: "error"
              });
            }
          });
        }
      },

      search() {
        this.listQuery.current = 1;
        let data = {
          size: this.listQuery.size,
          current: this.listQuery.current,
          condition: {
            realName: this.formInline.realName,
            workYear: this.formInline.workYear,
            academic: this.formInline.academic,
            idCard: this.formInline.idCard,
            employeeNo: this.formInline.employeeNo,
            sex: this.formInline.sex,
            orgSeq: this.orgSeq,
            tel: this.formInline.tel
          }
        };
        queryStoreUserInfo(data).then(res => {
          this.total = res.total;
          this.tableData = res.records;
        });
      },
      indexMethod(index) {
        let curpage = this.listQuery.current; //单前页码，具体看组件取值
        let limitpage = this.listQuery.size; //每页条数，具体是组件取值
        return index + 1 + (curpage - 1) * limitpage;
      },
      handledelete(v) {
        let data = {


          uuid: v.userId,

        };
        console.log("ioippp");
        this.$confirm("确认删除吗？").then(_ => {
          deleteClerk(data).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success"
              });

              this.rolemanageone();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: "error"
              });
            }
          });
        });
      },

      updateStatus(userId, status, userType) {
        this.userType = userType
        let data = {
          orgSeq: this.orgSeq,
          userType: this.userType,
          status: status,

          userId: userId
        };
        console.log("ioippp");
        this.$confirm("确认此操作吗？").then(_ => {
          editClerk(data).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "操作成功",
                type: "success"
              });

              this.rolemanageone();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: "error"
              });
            }
          });
        });
      },
      handleSizeChange(val) {
        this.listQuery.size = val;
        this.rolemanageone();
      },
      handleCurrentChange(val) {
        this.listQuery.current = val;
        this.rolemanageone();
      },

      rolemanageone() {
        this.logininfo = localStorage.getItem("logininfo");
        this.orgList = JSON.parse(this.logininfo).orgList;
        this.orgSeq = this.$route.params.orgSeq
        console.log(this.$route.params.orgSeq, "ioio00");
        let data = {
          size: this.listQuery.size,
          current: this.listQuery.current,
          condition: {
            realName: this.formInline.realName,
            workYear: this.formInline.workYear,
            academic: this.formInline.academic,
            idCard: this.formInline.idCard,
            employeeNo: this.formInline.employeeNo,
            sex: this.formInline.sex,
            orgSeq: this.orgSeq,
            tel: this.formInline.tel
          }
        };
        queryStoreUserInfo(data).then(res => {
          this.loading = false;
          this.total = res.total;
          this.tableData = res.records;
          console.log(this.tableData, "ppe");
        });
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisibleImg = true;
      },
      upLoadPicone(file, fileList) {
        this.imgListone = [];
        this.ruleForm.headPicUrl = file.result;
      },
      handleImgChangeone(file, fileList) {
        if (file.response) {
          this.imgListone.push({
            url: file.response.result,
            status: "finished"
          });
        }
      },

      handleImgChangetwo(file, fileList) {
        if (file.response) {
          this.imgListtwo.push({
            url: file.response.result,
            status: "finished"
          });
        }
      },

      handleExceed(file, fileList6) {
        this.$message.error(`图片最多上传1张`);
      }
    }
  };
</script>
<style lang="less" scoped>
  .toptitle {
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #188097;
    background: #f5f5f5;
    line-height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
  }

  .el-form-item .el-select {
    width: 100%;
  }
</style>
